﻿@model MvcEnrollment.Models.Course

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Units";
}

<style type="text/css">
#fade{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index:1001;
    -moz-opacity: 0.7;
    opacity:.70;
    filter: alpha(opacity=70);
}
#light{
    display: none;
    position: absolute;
    top: 30%;
    left: 40%;
    height: 150px;
    margin-left: -150px;
    margin-top: -100px;                 
    padding: 10px;
    border: 2px solid #FFF;
    background: #CCC;
    z-index:1002;
    overflow:visible;
}
</style>

    <script type="text/javascript">
        window.document.onkeydown = function (e) {
            if (!e) {
                e = event;
            }
            if (e.keyCode == 27) {
                lightbox_close();
            }
        }
        function lightbox_open() {
            window.scrollTo(0, 0);
            document.getElementById('light').style.display = 'block';
            document.getElementById('fade').style.display = 'block';
        }
        function lightbox_close() {
            document.getElementById('light').style.display = 'none';
            document.getElementById('fade').style.display = 'none';
        }
    </script>

<section id="CourseInfoForm">
    <text class="courseName">@Html.DisplayFor(model => model.Course_Name)</text><br /><br />
    <strong>CODE:</strong> &nbsp;@Html.DisplayFor(model => model.Course_Id)<br />
    <strong>PROVIDER:</strong> &nbsp;@Html.DisplayFor(model => model.Course_Provider)<br />
    <br />
</section>

<section class="social" id="RightPopForm">
    <section id ="rightbox">
        <p>Pay from $@ViewData["WeekPriceSmall"] weekly.</p>
        <input type="button" id="btnpopup" value="Enroll Now" onclick="lightbox_open();" />
        <div id="light">
            @{Html.RenderAction("PaymentOptions", "Course", new { id = Model.Course_Id });}
        </div>
        <div id="fade" onClick="lightbox_close();"></div> 
    </section>
</section>

<ul id="menu">
    <li>@Html.ActionLink("Course Description", "Details", new { id=Model.Course_Id})</li>
    <li>@Html.ActionLink("Units of study", "Units", new { id=Model.Course_Id})</li>
</ul>
<fieldset>
    <legend style="display:block; visibility:visible"><h3>Units</h3></legend>
    <div class="display-field" style="white-space:pre-line">
        @Html.Raw(System.Web.HttpUtility.HtmlDecode(Model.Units))
    </div>
</fieldset>
<br />

<br /><br />
    @{Html.RenderAction("PaymentOptions", "Course", new { id = Model.Course_Id });}